<template>
    <div style="padding:20px">
        <el-card>
            <el-row>
                <el-col :span="18"><span style="margin-right:10px">${entityName}</span> <el-button size="small" icon="el-icon-plus" type="primary" @click="dialogShow = true,form={},isAdd = true">添加</el-button>
                </el-col>
                <el-col :span="6">
                    <div style="text-align:right">
                        <el-input v-model="keyWord"  clearable >
                            <template #append>
                                <el-button icon="el-icon-search" @click="filterData">搜索</el-button>
                            </template>
                        </el-input>
                    </div>
                </el-col>

            </el-row>
        </el-card>

        <div style="width:100%;height:20px;"></div>
        <el-table v-loading="loading" :data="data" style="width: 100%" border>
            <el-table-column
                    v-for="(field, index) in fields"
                    :key="index"
                    :prop="field.prop"
                    :formatter="field.formatter"
                    :label="field.label"
                    :width="field.width"
                    show-overflow-tooltip
            ></el-table-column>

            <el-table-column fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="editRow(scope.$index, data)" size="small">编辑</el-button>
                    <el-button @click.native.prevent="deleteRow(scope.$index, data)" size="small" type="danger">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20,50, 100, 150, 200]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
        ></el-pagination>

        <el-dialog
                :title="title"
                :visible.sync="dialogShow"
                width="42%"
                :close-on-click-modal="false"
                :inline="true"
        >
            <div>
                <el-form ref="form" :model="form" label-width="auto" :rules="rules" inline>
                    <#list fields as column>
                        <el-form-item label="${column}" prop="${column}">
                            <el-input v-model="form.${column}" style="width:220px"></el-input>
                        </el-form-item>
                    </#list>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false" size="small">取消</el-button>
        <el-button
                type="primary"
                @click="handleConfirm"
                size="small"
                :loading="isLoading"
        >{{ btnText }}</el-button>
      </span>
        </el-dialog>

    </div>
</template>

<script>

    import request from "@/utils/request"

    export default {
        name: "${entityName}",
        components: {},
        data: function () {
            return {
                //关键字搜索
                keyWord: "",
                //当前页
                currentPage: 1,
                //页数
                pageSize: 20,
                //总记录数
                total: 0,
                loading: false,
                dialogShow: false,
                isAdd: false,
                form: {},
                isLoading: false,
                rules: {
                    <#list fields as field>
                        ${field}:[{required:true,message:"请输入",trigger:'blur'}],
                    </#list>
                },
                index: -1,
                data:[]
            };
        },
        methods: {

            //翻页尺寸
            handleSizeChange(val) {
                this.pageSize = val;
                this.listEntities();
            },
            //翻页页数
            handleCurrentChange(val) {
                this.currentPage = val;
                this.listEntities();
            },
            //过滤查询
            filterData() {
                this.currentPage = 1;
                this.listEntities();
            },
            //添加
            addRow() {
                //路由
                this.dialogShow = true;
                this.isAdd = true;
                this.$nextTick(()=>{
                    this.$refs['form'].resetFields()
                })

            },
            //编辑
            editRow(index, rows) {
                this.dialogShow = true;
                this.isAdd = false;
                this.index = index;
                this.form = Object.keys(rows[index]).reduce((a, b) => {
                    a[b] = rows[index][b];
                    return a;
                }, {})

            },
            //删除
            deleteRow(index, rows) {
                this.$confirm("此操作将该条记录删除, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    request({
                        url: "${baseUrl}/remove/" + rows[index].id,
                        method: "post",
                        data: this.form
                    }).then(() => {
                        this.isLoading = false;
                        rows.splice(index, 1);
                    }).catch(() => {
                        this.isLoading = false;
                    });
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
            },
            //分页查询
            listEntities() {

                const param = {
                    pageIndex: this.currentPage,
                    pageSize: this.pageSize
                };
                request({
                    url: "${baseUrl}/list",
                    method: "get",
                    params: param
                }).then(res => {
                    this.total = res.data.total;
                    this.data = res.data.list
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                });
            },
            //提交
            handleConfirm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        //校验
                        this.isLoading = true;
                        if (this.isAdd) {
                            //添加
                            request({
                                url: "${baseUrl}/add",
                                method: "post",
                                data: this.form
                            }).then(res => {
                                this.data.unshift(res.data);
                                this.isLoading = false;
                                this.dialogShow = false;
                            })
                                .catch(() => {
                                    this.isLoading = false;
                                });
                        } else {
                            //更新
                            request({
                                url: "${baseUrl}/update",
                                method: "post",
                                data: this.form
                            }).then(() => {
                                this.isLoading = false;
                                this.data.splice(this.index, 1, this.form);
                                this.dialogShow = false;
                            })
                                .catch(() => {
                                    this.isLoading = false;
                                });
                        }
                    } else {
                        return false;
                    }
                });
            }
        },
        computed: {

            fields() {
                return [
                    <#list fields as column>
                    {prop: "${column}", label: "${column}"},
                    </#list>
                ]
            },
            title() {
                return this.isAdd ? "添加" : "编辑";
            },
            btnText() {
                return this.isAdd ? "立即创建" : "保存";
            }
        },
        mounted() {
            this.listEntities();
        },
        beforeDestroy() {
        }
    };
</script>

<style scoped>

</style>

